<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/jstl/fn" prefix="fn"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no"> 
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <meta name="msapplication-TileColor" content="#0e90d2">

    <script src="<%=basePath%>assets/js/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="<%=basePath%>assets/css/amazeui.min.css">
    <script src="<%=basePath%>assets/layer/mobile/layer.js"></script>
	

    <style>
        html { font-size: 10px; }
        html,body { background-color: #f0eff4; }
        body { padding-bottom: 0;margin: 0; padding-top: 49px;}
        * { padding: 0;margin: 0; }
        header {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 49px; background-color: #333; color: #fff;}
        header .back { position: absolute;top: 0;left: 0; display: inline-block;padding-left: 5px; font-size: 30px; }
        header p { margin: 0;line-height: 49px; font-size: 16px;text-align: center; }
        .register { padding: 8px 6px; font-size: 14px;}
        .res-item {position: relative;  width: 100%; border-radius: 4px; margin-bottom: 8px;background-color: #fff; }
        .res-icon {position: absolute;left: 8px;top: 5px;z-index: 100; display: inline-block;font-size: 18px;color: #9c9c9c; }
        .res-item .input-item {display: inline-block;width: 100%;padding-left: 31px;height: 40px;border: none; font-size: inherit;}
        .res-item .input-item:focus { 
            outline-offset: 0;
            outline: -webkit-focus-ring-color auto -2px;
            background-color: #fefffe;
            border: 1px solid #e21945;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,.3);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,0.3);
        }
        .res-item .input-item:focus + .res-icon { color: #e21945; }
        .yanzhengma {position: absolute;right: 10px;top: 5px; z-index: 100;  display: inline-block;padding: 0.5rem 0.8rem;font-size: 14px; border: none;background-color: #e21945;color: #fff;border-radius: 8px; }
        .yanzhengma:disabled { background-color: #ddd; }
        .res-btn { margin-top: 10px;padding: 0 5px; }
        .res-btn button {  background-color: #e21945;font-size: 14px; color: #fff;border-radius: 8px; }
        .res-btn button:focus { color: #fff; }
        .other-link {
		    overflow: hidden;
		    margin: .4rem .266667rem;
		    color: #6c6c6c;
		}
        .other-link a{
        	color: #ff0036;
        }
        .ft-left {
		    float: left;
		}
        .ft-right {
		    float: right;
		}
    </style>
</head>
<body>
    <header>
        <i class="am-icon-angle-left back"></i>
        <p>登录</p>
    </header>
    <div class="register">
	    <form action="<%=basePath %>app/app_j_spring_security_check"  onsubmit="return check()" class="form-validation" method="post">
	        <div class="res-item">
	            
	            <input id="username" type="tel" placeholder="手机号" class="input-item mobile" name="username">
	            <i class="res-icon am-icon-phone"></i>
	        </div>
	        <div class="res-item">
	            <input id="password" type="passWord" placeholder="密码" class="input-item mima" name="password">
	            <i class="res-icon am-icon-check-square-o"></i>
	        </div>
	        <div class="res-btn">
	            <button type="submit" class="am-btn am-btn-block">登录</button>
	        </div>
	        <div class="other-link">
		        <a href="<%=basePath%>app/appRegister" class="ft_left">免费注册</a>
		        <a id="forget" class="ft_right">忘记密码</a>
	        </div>
        </form>
    </div>

</body>

<script>

	$(function(){
		var error = '${SPRING_SECURITY_LAST_EXCEPTION.message}';
		if(error && typeof(error)!='undefined' && error!=''){
			layer.open({
			    content: '用户名或密码错误'
		    	,skin: 'msg'
			    ,time: 2 //2秒后自动关闭
		  	});
		}
		$("#registerForm").hide();
		$("#volatileCodeBtn").attr("onclick","getVolatileCode()");
		$('#subRegistet').bind("click",function(){
			subRegister();
		});
		<% session.removeAttribute("SPRING_SECURITY_LAST_EXCEPTION");%>
	});

	function check(){
		if($("#username").val() == ""){
			layer.open({
			    content: '请输入手机号'
		    	,skin: 'msg'
			    ,time: 2 //2秒后自动关闭
		  	});
			return false;
		}
		if($("#password").val() == ""){
			layer.open({
			    content: '请输入密码'
		    	,skin: 'msg'
			    ,time: 2 //2秒后自动关闭
		  	});
			return false;
		}
	}
</script>
</html>
